(function(w) {
	console.log("会不会自动运行")
	//实例化参数
	var layer = layui.layer;
	//表格加载	
	var table = layui.table;
	var $ = layui.jquery;


	//记录复选框
	var listCheck = [];
	var dbtable = [];
	//函数封装
	var pageMain = {
		//入口方法
		initMain: function() {

			for (var i = 0; i < 500; i++) {
				var id = i + 1;
				var item = {
					"id": id,
					"username": "user-" + id,
					"sex": "女",
					"city": "城市-" + id,
					"sign": "签名-" + id,
					"experience": 977,
					"logins": 21,
					"wealth": 75935022,
					"classify": "作家" + id,
					"score": 100 + id,
					"field11": "field11-" + id,
					"field12": "field12-" + id,
					"field13": "field13-" + id,
					"field14": "field14-" + id,
					"field15": "field15-" + id,
				};
				dbtable.push(item)
			}


			//加载表格
			layer.msg("你好，开始加载了");
			pageInit.intiTable();
			//监听头部事件
			pageEvent.toolHeaderBar();
			//监听行工具事件
			pageEvent.toolRow();
			//搜索按钮操作
			pageEvent.searchBtn();
			//监听行事件
			//pageEvent.eventRow();
			//监听单元格事件
			//pageEvent.eventCols();
			//表格外自定义btn
			pageEvent.otherBtn();

			//扩展方法
			pageTool.arrayExtend();
		},


	}

	//页面初始化
	var pageInit = {
		//加载表格
		intiTable: function() {
			table.render({
				elem: '#demo',
				id: "idTest",
				height: 550,

				//数据设置
				url: '../DomeData/TableData.json', //数据接口		
				//data: dbtable,
				//分页设置
				page: true, //开启分页
				groups: 1, //只显示 1 个连续页码
				first: false, //不显示首页
				last: false, //不显示尾页
				limit: 500,
				//工具栏设置
				toolbar: '#toolbarDemo', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
				defaultToolbar: ['filter', 'exports'],

				totalRow: true, //开启合计行,
				initSort: {
					field: 'id', //排序字段，对应 cols 设定的各字段名			,
					type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
				},
				loading: true,
				cols: [
					[
						//多列展开
						{
							field: 'btn',
							width: 50,
							align: 'center',
							fixed: 'left',
							rowspan: 2,
							templet: function(d) {
								return '<a style="width: 100%; height: 100%;cursor: pointer;" lay-event="addRowTable">+</a>'
							}
						},
						//复杂表头
						//序号
						{
							type: 'numbers',
							fixed: 'left',
							rowspan: 2
						},


						//单选
						// {
						// 	type: 'radio',
						// 	fixed: 'left',
						// },
						//多选
						{
							type: 'checkbox',
							fixed: 'left',
							rowspan: 2
						},
						{
							field: 'id',
							title: 'ID',
							width: 80,
							sort: true,
							fixed: 'left',
							totalRowText: '合计',
							rowspan: 2
						},
						{
							title: '基本信息',
							colspan: 8
						},
						{
							title: '操作',

							colspan: 2
						}, {
							title: '增加列',

							colspan: 5
						},
					],
					[
						// //序号
						// {
						// 	type: 'numbers',
						// 	fixed: 'left',
						// },
						// //单选
						// // {
						// // 	type: 'radio',
						// // 	fixed: 'left',
						// // },
						// //多选
						// {
						// 	type: 'checkbox',
						// 	fixed: 'left',
						// },
						//表头
						// {
						// 	field: 'id',
						// 	title: 'ID',
						// 	width: 80,
						// 	sort: true,
						// 	fixed: 'left',
						// 	totalRowText: '合计'
						// }, 
						{
							field: 'username',
							title: '用户名',
							width: 80,
						}, {
							field: 'sex',
							title: '性别',
							width: 80,
							sort: true,
							templet: function(row) {
								if (row.sex == "女") {
									return '<span style="color: #c00;">' + row.sex + '</span>';
								} else {
									return row.sex;
								}
							}
						}, {
							field: 'city',
							title: '城市',
							width: 80,
							event: 'setCity',
							style: "background-color: #5FB878; color: #fff;",
						}, {
							field: 'sign',
							title: '签名',
							width: 177,
							edit: 'text',
						}, {
							field: 'experience',
							title: '积分',
							width: 80,
							sort: true,
							totalRow: true
						}, {
							field: 'score',
							title: '评分',
							width: 80,
							sort: true
						}, {
							field: 'classify',
							title: '职业',
							width: 80
						}, {
							field: 'wealth',
							title: '财富',
							width: 135,
							sort: true
						}, {
							field: 'sex',
							title: '表单元素',
							width: 135,
							sort: true,
							templet: "#switchTpl",
							unresize: true
						}, {
							field: 'details',
							title: '详情',
							width: 100,
							sort: true,
							templet: function(row) {
								return '<a class="layui-btn layui-btn-xs" lay-event="del" style="color: #2c689c;background-color:#fff">删除</a><a class="layui-btn layui-btn-xs" lay-event="details" style="color: #2c689c;background-color:#fff">查看详情</a>';
							}
						}, {
							field: 'field11',
							title: 'field11',
							width: 135,
							sort: true
						}, {
							field: 'field12',
							title: 'field12',
							width: 135,
							sort: true
						}, {
							field: 'field13',
							title: 'field13',
							width: 135,
							sort: true
						}, {
							field: 'field14',
							title: 'field14',
							width: 135,
							sort: true
						}, {
							field: 'field15',
							title: 'field15',
							width: 135,
							sort: true
						},
					]
				],
				done: function(res, curr, count) {
					//如果是异步请求数据方式，res即为你接口返回的信息。
					//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
					console.log("数据加载完成后的返回回调函数：" + count);
					console.log(res);
					//整行改变颜色
					$current = $('.layui-table-body td[data-field="id"]>div:contains("10003")'); //field为name的值为xxxx的行
					$current.parent().parent().css('background-color', 'yellow');
				},
				//数据解析
				// response: {
				// 	code: 200 //重新规定成功的状态码为 200，table 组件默认为 0
				// },
				// parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
				// 	return {
				// 		"code": res.code, //解析接口状态
				// 		"msg": res.msg, //解析提示文本
				// 		"count": 100, //解析数据长度
				// 		"data": res.data //解析数据列表
				// 	};
				// },
			});

		},
	}
	//页面时间绑定
	var pageEvent = {

		//监听头部事件
		toolHeaderBar: function() {
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				console.log(checkStatus)
				switch (obj.event) {
					case 'refresh':
						table.reload('demo')
						break;
					case 'update':
						var idValue = "";
						for (var i = 0; i < checkStatus.data.length; i++) {

							idValue += checkStatus.data[i].id + ",";
						}
						layer.alert('编辑:选中的行id:' + idValue);
						break;
					case 'popup':
						layer.open({
							type: 1,
							title: "我现在以一个页面层",
							area: ['500px', '300px'],
							closeBtn: 0, //关闭按钮配置0,1,2
							shadeClose: true, //是否点击遮罩层关闭窗口
							//btn: ['按钮一', '按钮二', '按钮三'] ,//可以无限个按钮
							//content: '我现在以一个页面层，这里是我的页面内容' //这里content是一个普通的String
							content: $('#Popup')
							//content: 'http://sentsin.com'
						});
						break;
					case 'del':
						// console.log(listCheck.length);
						// //遍历删除
						// listCheck.forEach(function(v,i){
						// 	v.del();
						// })
						//

						var trObj = {};

						trObj.layBody = obj.config.elem.next().find('.layui-table-body');
						trObj.layBody.find('.layui-form-checked').each(function(v, i) {
							var index = $(this).parents('tr').eq(0).data('index');
							var tr = trObj.layBody.find('tr[data-index="' + index + '"]');
							tr.remove();
						})


						//创建tr对象
						// obj.trObjs = [];
						// var trObj = {};
						// trObj.elem = obj.config.elem.next();
						// trObj.layBody = trObj.elem.find('.layui-table-body');
						// trObj.key = obj.config.id;
						// trObj.layBody.find('.layui-form-checked').each(function(v, i) {
						// 	obj.trObjs.push(pageEvent.commonMember(trObj, $(this)));

						// })
						// console.log(obj.trObjs)
						// obj.trObjs.forEach(function(v,i){
						// 	v.del();
						// })

						break;
				};
			});

		},
		commonMember: function(that, othis, eventThat) {
			var index = othis.parents('tr').eq(0).data('index');
			var tr = that.layBody.find('tr[data-index="' + index + '"]');
			var data = table.cache[that.key][index];
			return {
				tr: tr //行元素
					,
				data: table.clearCacheKey(data) //当前行数据
					,
				del: function() { //删除行数据
					table.cache[that.key][index] = [];
					tr.remove();
					//eventThat.scrollPatch();
				}
			}
		},

		//监听行工具事件
		toolRow: function() {
			table.on('tool(test)', function(obj) {
				console.log("表格行事件")
				var data = obj.data;
				var $this = $(this);
				var tr = $this.parents('tr');
				var trIndex = tr.data('index');
				if (obj.event === 'details') {
					layer.open({
						type: 1,
						title: "查看详情",
						area: ['500px', '300px'],
						closeBtn: 0, //关闭按钮配置0,1,2
						shadeClose: true, //是否点击遮罩层关闭窗口
						content: JSON.stringify(data)
					});
				} else
				if (obj.event === 'setCity') {
					layer.prompt({
						formType: 2,
						title: '修改 ID 为 [' + data.id + '] 的用户签名',
						value: data.city
					}, function(value, index) {
						layer.close(index);

						//这里一般是发送修改的Ajax请求

						//同步更新表格和缓存对应的值
						obj.update({
							city: value
						});
					});
				} else
				if (obj.event === 'del') {
					console.log("删除")
					console.log(obj)
					obj.del();
					layer.msg("删除成功");
					var list = table.cache.idTest;
					list.forEach(function(v, i, arr) {
						if (Array.prototype.isPrototypeOf(v) && v.length === 0) {

							console.log("进入删除")
							arr.splice(i, 1);
						}
					})
					// table.reload('idTest', {
					// 	data: list
					// });
					var num = list.length;
					$(".layui-laypage-count").text("共" + num + "条");
				} else
				if (obj.event === 'addRowTable') {

					// 外围的table的id + tableIn_ + 当前的tr的data-index
					$(this).attr('lay-event', 'fold').html('-');
					var tableId = 'tableOut_tableIn_' + trIndex;
					//这里要合并所有行中的列但是存在固定列和活动列
					//tr.find('td').length 
					//此方式获取不正确直接写值
					var _html = [
						'<tr class="table-item">',
						'<td colspan="' + 19 + '" style="padding: 6px 12px;">',
						'<table id="' + tableId + '"></table>',
						'</td>',
						'</tr>'
					];
					tr.after(_html.join('\n'));
					// 渲染table
					table.render({
						elem: '#' + tableId,
						data: data.friend || [],
						cols: [
							[{
									field: 'id',
									title: 'ID'
								},
								{
									field: 'name',
									title: '朋友姓名'
								},
								{
									field: 'age',
									title: '年龄'
								}
							]
						],

					});
				} else
				if (obj.event === 'fold') {
					$(this).attr('lay-event', 'addRowTable').html('+');
					tr.next().remove();
				}
			});
		},
		//搜索按钮操作
		searchBtn: function() {
			$('.demoTable .layui-btn').on('click', function() {
				console.log("搜索点击")
				var type = $(this).data('type');
				var demoReload = $('#demoReload');

				//执行重载
				table.reload('demo', {
					page: {
						curr: 1 //重新从第 1 页开始
					},
					where: {
						key: {
							id: demoReload.val()
						}
					}
				}, 'data');
			});
		},
		//监听行事件
		eventRow: function() {
			// table.on('row(test)', function(obj) {
			// 	var data = obj.data;

			// 	layer.alert(JSON.stringify(data), {
			// 		title: '当前行数据：'
			// 	});

			// 	//标注选中样式
			// 	obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
			// });

			//监听复选框
			table.on('checkbox(test)', function(obj) {
				console.log(obj); //当前是否选中状态
				if (obj.checked) {
					listCheck.push(obj)
				} else {
					console.log("删除指定元素")
					listCheck.remove(obj)
				}
				console.log(listCheck.length)
				console.log(listCheck)
				//console.log(obj.data); //选中行的相关数据
				//console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
			});
		},
		//监听单元格事件和行工具一样
		eventCols: function() {
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				if (obj.event === 'setCity') {
					layer.prompt({
						formType: 2,
						title: '修改 ID 为 [' + data.id + '] 的用户签名',
						value: data.city
					}, function(value, index) {
						layer.close(index);

						//这里一般是发送修改的Ajax请求

						//同步更新表格和缓存对应的值
						obj.update({
							city: value
						});
					});
				}
			});
		},
		//表格外自定义btn
		otherBtn: function() {
			//触发事件
			var active = {
				setTop: function() {
					var that = this;
					//多窗口模式，层叠置顶
					layer.open({
						type: 2 //此处以iframe举例
							,
						title: '当你选择该窗体时，即会在最顶端',
						area: ['390px', '260px'],
						shade: 0,
						maxmin: true,
						offset: [ //为了演示，随机坐标
							Math.random() * ($(window).height() - 300), Math.random() * ($(window).width() - 390)
						],
						content: '//layer.layui.com/test/settop.html',
						btn: ['继续弹出', '全部关闭'] //只是为了演示
							,
						yes: function() {
							$(that).click();
						},
						btn2: function() {
								layer.closeAll();
							}

							,
						zIndex: layer.zIndex //重点1
							,
						success: function(layero) {
							layer.setTop(layero); //重点2
						}
					});
				},
				confirmTrans: function() {
					//配置一个透明的询问框
					layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
						time: 20000, //20s后自动关闭
						btn: ['明白了', '知道了', '哦']
					});
				},
				notice: function() {
					//示范一个公告层
					layer.open({
						type: 1,
						title: false //不显示标题栏
							,
						closeBtn: false,
						area: '300px;',
						shade: 0.8,
						id: 'LAY_layuipro' //设定一个id，防止重复弹出
							,
						btn: ['火速围观', '残忍拒绝'],
						btnAlign: 'c',
						moveType: 1 //拖拽模式，0或者1
							,
						content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>',
						success: function(layero) {
							var btn = layero.find('.layui-layer-btn');
							btn.find('.layui-layer-btn0').attr({
								href: 'http://www.layui.com/',
								target: '_blank'
							});
						}
					});
				},
				offset: function(othis) {
					var type = othis.data('type'),
						text = othis.text();

					layer.open({
						type: 1,
						offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
							,
						id: 'layerDemo' + type //防止重复弹出
							,
						shade: [0.8, '#393D49'], //遮罩
						content: '<div style="padding: 20px 100px;">' + text + '</div>',
						btn: '关闭全部',
						btnAlign: 'c' //按钮居中
							,
						shade: 0 //不显示遮罩
							,
						yes: function() {
							layer.closeAll();
						}
					});
				},
			};
			$('#layerDemo .layui-btn').on('click', function() {
				console.log("121")
				var othis = $(this),
					method = othis.data('method');
				active[method] ? active[method].call(this, othis) : '';
			});
		},
	}
	//页面其他方法
	var pageTool = {
		arrayExtend: function() {
			Array.prototype.indexOf = function(val) {
				for (var i = 0; i < this.length; i++) {
					if (this[i].data.id == val.data.id) return i;
				}
				return -1;
			};
			Array.prototype.remove = function(val) {
				var index = this.indexOf(val);
				console.log(index)
				if (index > -1) {
					this.splice(index, 1);
				}
			};


			//扩展行头部获取删除

		},


	}


	w.pagMain = pageMain;

})(window);



//入口，想但与jq的$.ready
layui.layer.ready(function() {

	pagMain.initMain();

})
